<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 50px;">
    <div>
        <button class="btn btn-primary" id="add">新增</button>
        <button class="btn btn-primary" id="delete">删除</button>
        <button class="btn btn-primary" id="update">编辑</button>
        <button class="btn btn-primary" id="select">查询</button>
        <input type="text" placeholder="按工号查询" id="findId">
        <input type="text" placeholder="按姓名查询" id="findName">
    </div>
    <table class="table table-responsive">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <td><input type="checkbox"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>27</td>
                <td>1993-3-3</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>26</td>
                <td>1994-4-4</td>
            </tr>
        </tbody>
    </table>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    var index = 1;
    //新增一条数据，并且可以编辑
    $("#add").click(function add() {
        index++;
        var newtr = $("<tr><td><input type='checkbox'/></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
        //将新数据添加到最后一条
        $("tr:last").after(newtr);

        //隔行变色
        if (index % 2 == 0) {
            $("tr:last").attr("class", "info");
        } else {
            $("tr:last").attr("class", "warning");
        }
        $(newtr).children().slice(1).each(function () {
            $(this).attr("contenteditable", "true");
        });
    })

    //编辑
    $("#update").click(function () {
        //从tr下标为1的元素，即从工号开始遍历
        $("tr").slice(1).each(function () {
            var td = $(this).children()[0];
            var input = $(td).children()[0];

            //如果序号为选中状态，则设置为可编辑(从下标为1开始)
            if (input.checked) {
                $(this).children().slice(1).attr("contenteditable", "true");
            } else {
                $(this).children().slice(1).attr("contenteditable", "false");
            }
        });
    })

    //删除
    $("#delete").click(function () {
        //从tr中下标为1的元素，即从工号开始遍历
        $("tr").slice(1).each(function () {
            var td = $(this).children()[0];
            var input = $(td).children()[0];

            //如果序号为选中状态，则删除)
            if (input.checked) {
                $(this).remove();
            }
        })
    })

    //查询
    $("#select").click(function () {
        //获取输入框输入的值
        var id = $("#findId").val();
        var name = $("#findName").val();
        if (id != "" ||name != "" ){
            //从tr中小标为1的开始遍历，即从工号遍历
            $("tr").slice(1).each(function () {
                //获取对应的工号和姓名
                var td_id = $(this).children()[1].textContent;
                var td_name = $(this).children()[2].textContent;
                //如果相等则显示，不相等则隐藏
                if (id == td_id || name == td_name) {
                    $(this).show();
                } else {
                    $(this).hide();
                }

            })
        }
    })


</script>

</html>